<body>
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
        <li class="layui-this">图片列表</li>
        <li>使用说明</li>
    </ul>
    <div class="layui-tab-content" style="height: 100px;">
        <div class="layui-tab-item layui-show">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-card-header">
                        <a id="add" shiro:hasAnyPermissions="admin,picture:all,picture:upload" class="layui-btn layui-btn-xs">
                            <i class="layui-icon"></i>
                            <span>上传</span>
                        </a>
                        <a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-primary" id="search_hash">
                            <i class="layui-icon">&#xe615;</i>
                        </a>
                    </div>
                    <table class="layui-table" id="myTable" lay-filter="tools"></table>
                    <script type="text/html" id="operation">
                        <button class="layui-btn layui-btn-xs layui-btn-primary" lay-event="look">查看</button>
                        <button shiro:hasAnyPermissions="admin,picture:all,picture:delete" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>
                    </script>
                </div>
            </div>
        </div>

        <div class="layui-tab-item">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>使用说明</legend>
            </fieldset>
            <blockquote class="layui-elem-quote">
                SM.MS是什么</blockquote>
            <pre class="layui-code">
1、SM.MS是一个免费的图床网站
2、无外链限制
3、无流量限制</pre>
            <blockquote class="layui-elem-quote">开始使用</blockquote>
            <pre class="layui-code">
//将参数合成一个请求
HttpEntity requestEntity = new HttpEntity&lt;&gt;(file);
RestTemplate rest = new RestTemplate();
FileSystemResource resource = new FileSystemResource(file);
MultiValueMap&lt;String, Object&gt; param = new LinkedMultiValueMap&lt;&gt;();
//sm.ms 固定格式
param.add("smfile", resource);
//执行HTTP请求
rest.postForObject("", param, String.class);
String str = rest.postForObject("https://sm.ms/api/upload", param, String.class);
JSONObject jsonObject = JSONUtil.parseObj(str);
Picture picture = null;
//判断上传状态
if(){
   throw new AuroraException();
}
//转成实体类
picture = JSON.parseObject(jsonObject.get("data").toString(), Picture.class);
//保存
pictureRepo.save(picture);
//正常情况为 success，出现错误时为 error，返回格式如下
{
	"code":"success",
	"data":
	{
		"width":200,
		"height":200,
		"size":8698,
		"ip":"36.25.51.131",
		"url":"https://i.loli.net/2018/10/03/5bb422aaccfa9.jpg",
		"delete":"https://sm.ms/delete/lv5AFYOCJ23Hoaj"
	}
}
</pre>
            <blockquote class="layui-elem-quote">更多帮助</blockquote>
            <pre class="layui-code">更多帮助请查看系统源码，官方API文档
SM.MS文档：<a style="color: #00a2d4" href="https://sm.ms/doc/" target="_blank">https://sm.ms/doc/</a>
</pre>
        </div>
    </div>
</div>

<script type="text/html" id="search_tpl_hash">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:80px;">用户名</label>
            <div class=layui-input-lump>
                <input type="text" name="username" placeholder="请输入用户名.." autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-lump">
                <button class="layui-btn" lay-submit lay-filter="formDemo_hash">搜索</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</script>
<script>
    layui.use(['jquery', 'table', 'sidebar', 'form'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            table = layui.table,
            sidebar = layui.sidebar,
            form = layui.form;
        //监听新增事件
        $('#add').on('click', function(){
            var index = layer.open({
                 type: 2
                ,content: '/picture/toAddPage'
                ,area: ['550px', '400px']
                ,btnAlign: 'c'
                ,closeBtn :0//不显示关闭按钮
                ,shade: 0.8
                ,maxmin: true
                ,title: '上传图片'
                ,btn: ['确认', '取消']
                ,yes: function(){
                    var body = layer.getChildFrame('body')
                    body.contents().find("#testListAction").click()
                }
                ,btn2: function(){
                    table.reload('ID', {
                        where: {}
                        ,page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                }
            });
        });

        //表格渲染
        table.render({
            elem: '#myTable'
            ,url:'/picture/getPictureInfo'
            ,page: true
            ,id:"ID"
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [
                [
                     {field:'id',align:'center', width:70,  title: '编号'}
                    ,{field:'filename',  title: '文件名'}
                    ,{field:'userName',  title: '上传者'}
                    ,{field:'url',  title: '图片地址'}
                    ,{field:'height',  title: '高度（像素）'}
                    ,{field:'width',  title: '宽度（像素）'}
                    ,{field:'size',  title: '图片大小'}
                    ,{field:'createTime',  title: '上传时间'}
                    ,{field:'operation',align:'center', width:150, toolbar: '#operation', title: '操作',fixed: 'right'}
                ]
            ]
        });

        //监听搜索事件
        $('#search_hash').on('click', function () {
            var that = this;
            sidebar.render({
                elem: that,
                content: $('#search_tpl_hash').html(),
                title: '搜索',
                shade: true,
                width: '450px', //可以设置百分比和px
                done: function () {
                    form.render();
                    //监听提交
                    form.on('submit(formDemo_hash)', function (data) {
                        table.reload('ID', {
                            where: {
                                username: $('input[name="username"]').val()
                            }
                            ,page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                        return false;
                    });
                }
            });
        });

        //监听按钮
        table.on('tool(tools)', function(obj){
            var data = obj.data;
            if(obj.event === 'look'){
                var id = data.id;
                var url = data.url;
                var filename = data.filename;
                var json = {
                    "title": "预览",
                    "id": id,
                    "start":0,
                    "data": [
                        {
                            "alt": filename,
                            "pid": id,
                            "src": url
                        }
                    ]
                }
                layer.photos({
                     photos: json
                    ,full: true
                    ,closeBtn: 1
                    ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                });
            }else if(obj.event === 'del'){
                layer.confirm("你确定删除数据吗?", {icon: 3 ,btnAlign: 'c', title:'提示'},
                    function(index){//确定回调
                        // 写删除方法
                        $.ajax({
                            url: "/picture/delete?id="+data.id,
                            type: "DELETE",
                            success: function(data){
                                if (data.code == 200) {
                                    layer.close(index);
                                    spop({
                                        template: '删除成功',
                                        style: 'success',
                                        autoclose: 2000
                                    });
                                    table.reload('ID', {
                                        where: {}
                                        ,page: {
                                            curr: 1
                                        }
                                    });
                                } else {
                                    layer.close(index);
                                    spop({
                                        template: data.msg,
                                        style: 'error',
                                        autoclose: 2000
                                    });
                                }
                            }
                        });
                    });
            }
        });
    });
</script>